<template>
    <div class="Single">
        <!-- 单曲元素 -->
        <div class="hotSongsItem" :class="{ select: item.id === id }">
            <!-- 左盒 -->
            <div class="left">
                <!-- 下标 -->
                <div class="index" v-show="item.id !== id">
                    {{ 10 > index + 1 ? '0' + (index + 1) : index + 1 }}
                </div>
                <!-- 动画 -->
                <ul class="animation" v-show="item.id === id">
                    <li :class="{ stop: !playSuspend }"></li>
                    <li :class="{ stop: !playSuspend }"></li>
                    <li :class="{ stop: !playSuspend }"></li>
                    <li :class="{ stop: !playSuspend }"></li>
                </ul>

                <!-- 文本 -->
                <div class="p_box">
                    <!-- 歌名 -->
                    <div class="songName">{{ item.name }}</div>
                    <!-- 专辑名\歌手 -->
                    <div class="albumName">{{ item.albumName }}</div>
                </div>
            </div>
            <!-- 右盒 -->
            <div class="right">
                <!-- mv图标 -->
                <div class="mv" v-if="item.mv !== 0">
                    <van-icon :name="require('../assets/MV1.png')" />
                </div>
                <!-- 播放 -->
                <div class="play" @click="getAudioUrl(item.id)">
                    <van-icon name="play" v-show="item.id !== id" />
                    <van-icon
                        name="weapp-nav"
                        v-show="item.id === id"
                        :class="{ stop: !playSuspend }"
                    />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions, createNamespacedHelpers } from 'vuex';
const {
    mapState: controlAudioMapState,
    mapMutations: controlAudioMapMutations,
    mapGetters: controlAudioMapGetters,
    mapActions: controlAudioMapActions
} = createNamespacedHelpers('controlAudio');

export default {
    name: "Single",
    props: {
        item: {
            type: Object,
            default() {
                return {};
            },
        },
        index: {
            type: Number,
            default: null
        }
    },
    computed: {
        // 音频的播放状态
        ...controlAudioMapState(['id', 'playSuspend']),
    },
    methods: {
        ...controlAudioMapMutations(['playSuspend_Switch', 'changeAudioUrl', 'changeStateProperty']),


        // 获取音频路径
        getAudioUrl(id) {
            // 消除重复请求
            if (this.id === id) {
                this.playSuspend_Switch();
                return
            }
            // 改变音频id
            this.changeStateProperty({ key: 'id', value: id });
            // 获取新数据
            this.changeStateProperty({ key: 'obtainNewData_YN', value: true });

            this.axios({
                method: "GET",
                url: "/song/url",
                params: { id }
            }).then((result) => {
                // console.log("🚀 ==> getAudioUrl ==> result", result);
                if (result.data.code === 200) {
                    if (result.data.data[0].url) {
                        console.log("🚀 ==> getAudioUrl ==> 请求路径成功！", result.data.data[0].url);
                        this.changeAudioUrl(result.data.data[0].url);

                    } else {
                        console.log("没有路径");
                        // 请求失败
                        Toast.fail({
                            message: "没有路径！\n官方的问题！",
                            forbidClick: true,
                        });
                    }
                }
            }).catch((err) => {
                console.log("🚀 ==> getAudioUrl ==> err", err);
            });

        },
    },
}
</script>

<style lang="less" scoped>
.Single {
    // 单曲元素
    .hotSongsItem {
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;

        // 左盒
        .left {
            display: flex;
            align-items: center;

            // 下标
            .index {
                margin-right: 26px;
                font-size: 14px;
                color: #afafaf;
            }

            // 动画
            .animation {
                width: 30px;
                height: 36px;
                margin-right: 15px;
                display: flex;
                justify-content: space-between;
                align-items: end;

                li {
                    width: 15%;
                    background-color: #b92fd3;
                    animation: aaa 1.2s linear infinite;
                    &.stop {
                        animation-play-state: paused;
                    }

                    &:nth-child(1) {
                        animation-delay: 0.3s;
                    }
                    &:nth-child(2) {
                        animation-delay: 0.9s;
                    }
                    &:nth-child(3) {
                        animation-delay: 0.1s;
                    }
                    &:nth-child(4) {
                        animation-delay: 0.6s;
                    }
                }
            }

            // 文本盒
            .p_box {
                max-width: 210px;
                letter-spacing: 1px;
                // 歌名
                .songName {
                    font-size: 16px;
                    margin-bottom: 8px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    word-break: break-all;
                }
                // 专辑名/歌手
                .albumName {
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    word-break: break-all;
                    color: #afafaf;
                }
            }
        }
        // 右盒
        .right {
            display: flex;
            align-items: center;

            // mv图标
            .mv {
                margin-right: 15px;
                i {
                    height: 26px;
                    font-size: 26px;
                }
            }

            // 播放
            .play {
                i {
                    background-image: linear-gradient(135deg, #db2ef8, #2825c3);
                    border-radius: 50%;
                    padding: 2px;
                    font-size: 26px;
                }
            }
        }

        // 正在播放
        &.select {
            background-image: linear-gradient(-90deg, #ba2fd3, #1d1ba3);
            .songName {
                font-weight: 600;
                color: #da38f7;
            }
            .play {
                i {
                    background-image: none;
                    padding: 2px;
                    transform: rotate(90deg);
                    animation: abc 3s linear infinite forwards;

                    &.stop {
                        animation-play-state: paused;
                    }
                }
            }
        }
    }
}
@keyframes aaa {
    0% {
        height: 10%;
    }
    50% {
        height: 100%;
    }

    100% {
        height: 10%;
    }
}

@keyframes abc {
    0% {
        color: #6813cf;
    }
    50% {
        color: #fff;
    }

    100% {
        color: #6813cf;
    }
}
</style>